<template>
  <DataCard title="项目跟踪" icon="📋">
    <div class="project-list">
      <div 
        v-for="project in sortedProjects" 
        :key="project.id"
        class="project-item"
        :class="{ 
          'risk-high': highlightRisks && project.riskLevel === 'high',
          'risk-medium': highlightRisks && project.riskLevel === 'medium',
          'expanded': expandedId === project.id
        }"
        @click="toggleExpand(project.id)"
      >
        <div class="project-header">
          <div class="project-info">
            <h4>{{ project.name }}</h4>
            <span class="project-status" :class="`status-${project.status}`">
              {{ getStatusText(project.status) }}
            </span>
          </div>
          <div class="project-meta">
            <span class="progress">{{ project.progress }}%</span>
            <span v-if="project.riskLevel === 'high'" class="risk-badge">⚠️</span>
          </div>
        </div>
        
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: `${project.progress}%` }"></div>
        </div>
        
        <transition name="expand">
          <div v-if="expandedId === project.id" class="project-details">
            <div class="detail-row">
              <span class="label">开始日期:</span>
              <span>{{ formatDate(project.startDate) }}</span>
            </div>
            <div class="detail-row">
              <span class="label">截止日期:</span>
              <span>{{ formatDate(project.deadline) }}</span>
            </div>
            <div class="detail-row">
              <span class="label">团队成员:</span>
              <span>{{ project.team.length }} 人</span>
            </div>
            <div class="detail-row">
              <span class="label">里程碑:</span>
              <span>{{ project.milestones.filter(m => m.completed).length }}/{{ project.milestones.length }}</span>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </DataCard>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { ProjectTrackerProps, Project } from '@/types'
import DataCard from './DataCard.vue'

const props = withDefaults(defineProps<ProjectTrackerProps>(), {
  highlightRisks: true,
  sortBy: 'status'
})

const expandedId = ref<string | null>(null)

const sortedProjects = computed(() => {
  const projects = [...props.projects]
  
  switch (props.sortBy) {
    case 'deadline':
      return projects.sort((a, b) => a.deadline.getTime() - b.deadline.getTime())
    case 'priority':
      const priorityMap = { high: 3, medium: 2, low: 1 }
      return projects.sort((a, b) => priorityMap[b.riskLevel] - priorityMap[a.riskLevel])
    default:
      return projects
  }
})

function toggleExpand(id: string) {
  expandedId.value = expandedId.value === id ? null : id
}

function getStatusText(status: string): string {
  const map: Record<string, string> = {
    'planning': '计划中',
    'in-progress': '进行中',
    'delayed': '延期',
    'completed': '已完成'
  }
  return map[status] || status
}

function formatDate(date: Date): string {
  return new Intl.DateTimeFormat('zh-CN').format(date)
}
</script>

<style lang="scss" scoped>
.project-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 600px;
  overflow-y: auto;
}

.project-item {
  padding: 1rem;
  background: rgba(0, 243, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 243, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateX(4px);
    border-color: var(--color-primary);
  }
  
  &.risk-high {
    border-color: rgba(255, 51, 102, 0.5);
    background: rgba(255, 51, 102, 0.05);
    
    .project-header h4 {
      color: #ff3366;
    }
  }
  
  &.risk-medium {
    border-color: rgba(255, 170, 0, 0.5);
    background: rgba(255, 170, 0, 0.05);
  }
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.project-info {
  flex: 1;
  
  h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1rem;
  }
}

.project-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  
  &.status-planning {
    background: rgba(0, 243, 255, 0.2);
    color: var(--color-primary);
  }
  
  &.status-in-progress {
    background: rgba(0, 255, 136, 0.2);
    color: var(--color-accent);
  }
  
  &.status-delayed {
    background: rgba(255, 170, 0, 0.2);
    color: #ffaa00;
  }
  
  &.status-completed {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
  }
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  
  .progress {
    font-weight: bold;
    color: var(--color-primary);
  }
  
  .risk-badge {
    font-size: 1.2rem;
  }
}

.progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 0.3s ease;
  box-shadow: 0 0 10px var(--color-primary);
}

.project-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  
  .label {
    color: var(--text-secondary);
  }
}

.expand-enter-active,
.expand-leave-active {
  transition: all 0.3s ease;
  max-height: 200px;
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  max-height: 0;
  opacity: 0;
}
</style>
